<%--
  Created by IntelliJ IDEA.
  User: macbookpro
  Date: 2023/11/22
  Time: 21:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>申请成为作者</title>
    <link href="css/authorApply.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.css" rel="stylesheet">
</head>
<style>
    input:focus{
        border-color: #0f82ec;
    }
</style>
<body>
<header id="header">
    <a href="" traget="_blank" class="site-logo">豆瓣阅读</a>
    <ul class="nav">
        <li class="nav-inner"><a>作品展示</a></li>
        <li class="nav-inner"><a>译者项目</a></li>
        <li class="nav-inner"><a>征文活动</a></li>
        <li class="nav-inner"><a>出版与改编</a></li>
    </ul>
</header>
<div class="main-page">
    <h1 class="page-title">申请成为作者</h1>
    <form method="post" onsubmit="return false" action="#"  class="author-application" id="author-apply">
        <div class="ahthor">
            <div class="field-name tips">作者个人信息</div>
            <div class="tips-block">以下信息会在你的豆瓣阅读个人主页、作品等页面展示给你的读者。</div>
        </div>
        <div class="input-field">
            <label for="field-name1" class="field-label">*作者署名</label>
            <div class="field-name-groups">
                <input type="text" name="aliasName" id="field-name1" class="input-field-name" placeholder="不超过10个字" style="height: 32px">
                <span id="errorMessage" class="error-message">此项为必填项</span>
            </div>
        </div>
        <div class="input-field">
            <label for="author-introduction" class="field-label">*个人介绍</label>
            <div class="field-name-groups">
                <textarea type="text" rows="6" name="profile" placeholder="请介绍一下自己吧，100字以内" maxlength="100" id="author-introduction"></textarea>
                <span id="errorMessage1" class="error-message">此项为必填项</span>
            </div>
        </div>
        <div class="author">
            <div class="field-name tips">联系方式</div>
            <div class="tips-block">可能就作品审核，作品授权等问题与你联系，请填写你的常用联系方式</div>
        </div>
        <div class="input-field">
            <label for="phonenumber" class="field-label">*手机号</label>
            <div class="field-name-groups">
                <input type="text" name="username" id="phonenumber" class="input-field-name" placeholder="请填写您常用手机号" style="height: 32px">
                <span id="errorMessage4" class="error-message">此项为必填项</span>
            </div>
        </div>
        <div class="input-field">
            <label for="wx" class="field-label">微信号</label>
            <div class="field-name-groups">
                <input type="text" id="wx" class="input-field-name" name="wechat" placeholder="建议填写，方便小编快速找到您" style="height: 32px">
            </div>
        </div>
        <div class="choose">
            <label for="agree-term" class="checkbox">
                <input type="checkbox" name="agreed" data-validate="data-validate" data-required="data-required" id="agree-term" class="error">
            </label>
            <p class="agree-info">我已阅读并同意《作者注册协议》</p>
        </div>
        <div class="line"></div>
        <div class="submit-forms">
            <button type="submit" class="btn btn-submit" id="submitForm">确认提交</button>
        </div>
    </form>
</div>
<script src="js/authorApply.js"></script>
<script>
    //对表单提交的监听事件
    $('#submitForm').on('click',function (){
        $.ajax({
             type:"POST",
             url:"/apply/insert",
             data:form2JsonString('author-apply'),
             contentType:"application/json;charset=UTF-8",
             processData:false,
             success:function (){
                 swal({
                     title:"提交成功",
                     text:"请等待平台审核",
                     type:"success",
                     onClose:function (){
                         window.location.href="/"
                     }
                 });
                 },
            error:function (error){
                 console.log(error);
            }
        })
    })
    function form2JsonString(formId) {
        var paramArray = $('#' + formId).serializeArray();
        /*请求参数转json对象*/
        var jsonObj = {};
        $(paramArray).each(function () {
            jsonObj[this.name] = this.value;
        });
        console.log(jsonObj);
        // json对象再转换成json字符串
        return JSON.stringify(jsonObj);
    }
</script>
</body>
</html>
